<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{path:'/ad_home'}">首页</el-breadcrumb-item>
			<el-breadcrumb-item>采购明细管理</el-breadcrumb-item>
			<el-breadcrumb-item>采购明细列表</el-breadcrumb-item>
		</el-breadcrumb>

		<!--卡片视图区域-->
		<el-card>
			<!--搜索和添加区域-->
			<el-row :gutter="20">
				<el-col :span="15">
					<el-input
						placeholder="请输入要查询的采购明细id"
						v-model="queryInfo.id"
						clearable
					>
						<el-button
							slot="append"
							icon="el-icon-search"
							@click="getUser"
						></el-button>
					</el-input>
				</el-col>

				<!--添加按钮区-->
			</el-row>

			<!--采购明细列表区 挂载stafflist-->
			<el-table
				:data="purchase_detaillist"
				border
				stripe
			>
				<!--索引-->
				<el-table-column type="index"></el-table-column>
				<!--指定数据源!-->
				<el-table-column
					label="采购明细号"
					prop="Purchase_details_id"
				>
				</el-table-column>

				<el-table-column
					label="采购清单号"
					prop="Purchase_details_list"
				>
				</el-table-column>

				<el-table-column
					label="商品编号"
					prop="Purchase_details_goods_id"
				>
				</el-table-column>

				<el-table-column
					label="采购数量"
					prop="Purchase_details_count"
				>
				</el-table-column>

				<el-table-column
					label="商品单价"
					prop="Purchase_details_price"
				>
				</el-table-column>

				<el-table-column
					label="商品总价"
					prop="Purchase_details_prices"
				>
				</el-table-column>

				<el-table-column
					label="备注"
					prop="Purchase_details_remarks"
				>
				</el-table-column>

			</el-table>
		</el-card>

		<!--采购明细查询区-->
		<div>采购明细资料查询区</div>
		<el-table
			:data="test_purchase_detaillist"
			border
			stripe
		>
			<!--指定数据源!-->
			<el-table-column
				label="采购明细号"
				prop="Purchase_details_id"
			>
			</el-table-column>

			<el-table-column
				label="采购清单号"
				prop="Purchase_details_list"
			>
			</el-table-column>

			<el-table-column
				label="商品编号"
				prop="Purchase_details_goods_id"
			>
			</el-table-column>

			<el-table-column
				label="采购数量"
				prop="Purchase_details_count"
			>
			</el-table-column>

			<el-table-column
				label="商品单价"
				prop="Purchase_details_price"
			>
			</el-table-column>

			<el-table-column
				label="商品总价"
				prop="Purchase_details_prices"
			>
			</el-table-column>

			<el-table-column
				label="备注"
				prop="Purchase_details_remarks"
			>
			</el-table-column>
		</el-table>

		<!--按钮区域-->
		<!--添加采购明细对话框-->
		<el-dialog
			title="添加采购明细"
			:visible.sync="addDialogVisiable"
			width="50%"
			@close="addDialogClosed"
		>
			<!--新增采购明细时的显示信息主体区域-->
			<span>
				<el-form
					:model="addForm"
					:rules="addFormRules"
					width="50%"
					label-width="80px"
					ref="addFormRef"
				>
					<el-form-item
						label="采购明细id"
						prop="purchase_details_id"
					>
						<el-input v-model="modifyForm.purchase_details_id"></el-input>
					</el-form-item>

					<el-form-item
						label="采购清单号"
						prop="purchase_details_list"
					>
						<el-input v-model="modifyForm.purchase_details_list"></el-input>
					</el-form-item>

					<el-form-item
						label="商品编号"
						prop="purchase_details_goods_id"
					>
						<el-input v-model="modifyForm.purchase_details_goods_id"></el-input>
					</el-form-item>

					<el-form-item
						label="商品数量"
						prop="purchase_details_count"
					>
						<el-input v-model="modifyForm.purchase_details_count"></el-input>
					</el-form-item>

					<el-form-item
						label="商品单价"
						prop="purchase_details_price"
					>
						<el-input v-model="modifyForm.purchase_details_price"></el-input>
					</el-form-item>

					<el-form-item
						label="商品总价"
						prop="purchase_details_prices"
					>
						<el-input v-model="modifyForm.purchase_details_prices"></el-input>
					</el-form-item>

					<el-form-item
						label="备注"
						prop="purchase_details_remarks"
					>
						<el-input v-model="modifyForm.purchase_details_remarks"></el-input>
					</el-form-item>
				</el-form>
			</span>
			<!--底部区域-->
			<span
				slot="footer"
				class="dialog-footer"
			>
				<el-button @click="addDialogVisiable = false">取消</el-button>
				<el-button
					type="primary"
					@click="addPurchase_detail"
				>确定</el-button>
			</span>
		</el-dialog>

		<!--删除采购明细对话框-->
		<el-dialog
			title="删除采购明细"
			:visible.sync="deleteDialogVisiable"
			width="50%"
			@close="deleteDialogClosed"
		>
			<!--删除采购明细时的显示信息主体区域-->
			<span>
				<el-form
					:model="deleteForm"
					:rules="deleteFormRules"
					width="50%"
					label-width="80px"
					ref="deleteFormRef"
				>
					<el-form-item
						label="采购明细id"
						prop="purchase_details_id"
					>
						<el-input v-model="deleteForm.purchase_details_id"></el-input>
					</el-form-item>
				</el-form>
			</span>
			<!--底部区域-->
			<span
				slot="footer"
				class="dialog-footer"
			>
				<el-button @click="deleteDialogVisiable = false">取消</el-button>
				<el-button
					type="primary"
					@click="deletePurchase_detail"
				>确定</el-button>
			</span>

		</el-dialog>

		<!--修改采购明细对话框-->
		<el-dialog
			title="修改采购明细"
			:visible.sync="modifyDialogVisiable"
			width="50%"
			@close="modifyDialogClosed"
		>
			<!--修改采购明细时的显示信息主体区域-->
			<span>
				<el-form
					:model="modifyForm"
					:rules="modifyFormRules"
					width="50%"
					label-width="80px"
					ref="modifyFormRef"
				>
					<el-form-item
						label="采购明细id"
						prop="purchase_details_id"
					>
						<el-input v-model="modifyForm.purchase_details_id"></el-input>
					</el-form-item>

					<el-form-item
						label="采购清单号"
						prop="purchase_details_list"
					>
						<el-input v-model="modifyForm.purchase_details_list"></el-input>
					</el-form-item>

					<el-form-item
						label="商品编号"
						prop="purchase_details_goods_id"
					>
						<el-input v-model="modifyForm.purchase_details_goods_id"></el-input>
					</el-form-item>

					<el-form-item
						label="商品数量"
						prop="purchase_details_count"
					>
						<el-input v-model="modifyForm.purchase_details_count"></el-input>
					</el-form-item>

					<el-form-item
						label="商品单价"
						prop="purchase_details_price"
					>
						<el-input v-model="modifyForm.purchase_details_price"></el-input>
					</el-form-item>

					<el-form-item
						label="商品总价"
						prop="purchase_details_prices"
					>
						<el-input v-model="modifyForm.purchase_details_prices"></el-input>
					</el-form-item>

					<el-form-item
						label="备注"
						prop="purchase_details_remarks"
					>
						<el-input v-model="modifyForm.purchase_details_remarks"></el-input>
					</el-form-item>
				</el-form>
			</span>
			<!--底部区域-->
			<span
				slot="footer"
				class="dialog-footer"
			>
				<el-button @click="modifyDialogVisiable = false">取消</el-button>
				<el-button
					type="primary"
					@click="modifyPurchase_detail"
				>确定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
export default{
	data(){
		return{
			queryInfo:{ //添加数据时候要用到
				id:'',
			},
			purchase_detaillist:[], //这里存放后端发送的采购明细数据
			test_purchase_detaillist:[],//存放要查询的采购明细的信息

			//控制添加采购明细的对话框
			addDialogVisiable:false,	//添加对话框
			modifyDialogVisiable:false,	//修改对话框
			deleteDialogVisiable:false,	//删除对话框

			//添加采购明细的表单数据
			addForm:{
				purchase_details_id:"",
				purchase_details_list:"",
				purchase_details_goods_id:"",
				purchase_details_count:"",
				purchase_details_price:"",
				purchase_details_prices:"",
				purchase_details_remarks:"",
			},


			//删除采购明细的表单数据
			deleteForm:{
				purchase_details_id:"",
			},


			//添加采购明细的表单数据
			modifyForm:{
				purchase_details_id:"",
				purchase_details_list:"",
				purchase_details_goods_id:"",
				purchase_details_count:"",
				purchase_details_price:"",
				purchase_details_prices:"",
				purchase_details_remarks:"",
			},


			//添加表单的验证规则对象
			addFormRules:{
				purchase_details_id:[
					{required:true,message:"请输入采购明细id",trigger:"blur"},
				],
				purchase_details_list:[
					{required:true,message:"请输入采购清单号",trigger:"blur"},
				],
				Purchase_details_goods_id:[
					{required:true,message:"请输入商品编号",trigger:"blur"},
				],
				purchase_details_count:[
					{required:true,message:"请输入采购数量",trigger:"blur"},
				],
				purchase_details_price:[
					{required:true,message:"请输入商品单价",trigger:"blur"},
				],
				purchase_details_prices:[
					{required:true,message:"请输入商品总价",trigger:"blur"},
				],
				purchase_details_remarks:[
					{required:true,message:"请输入备注",trigger:"blur"},
				],
			},


			//修改采购明细的表单数据
			//修改表单的验证规则对象
			modifyFormRules:{
				purchase_details_id:[
					{required:true,message:"请输入采购明细id",trigger:"blur"},
				],
				purchase_details_list:[
					{required:true,message:"请输入采购清单号",trigger:"blur"},
				],
				Purchase_details_goods_id:[
					{required:true,message:"请输入商品编号",trigger:"blur"},
				],
				purchase_details_count:[
					{required:true,message:"请输入采购数量",trigger:"blur"},
				],
				purchase_details_price:[
					{required:true,message:"请输入商品单价",trigger:"blur"},
				],
				purchase_details_prices:[
					{required:true,message:"请输入商品总价",trigger:"blur"},
				],
				purchase_details_remarks:[
					{required:true,message:"请输入备注",trigger:"blur"},
				],
			},

			//删除采购明细的表单数据
			//删除表单的验证规则对象
			deleteFormRules:{
				purchase_details_id:[
					{required:true,message:"请输入要删除的采购明细id",trigger:"blur"},
				],
			},

		}
	},
	created(){
		this.getUserList()
	},
	methods:{
		async getUserList(){ //挺重要的方法，请记住如何使用 通过这个函数得到后端的采购明细数据
			const {data:res} = await this.$http.post('ad_pd_manager',{
				params: this.queryInfo
			})
			// if(res.code!="200"){
			// 	return this.$message.error("获取采购明细信息失败")
			// }
			console.log(res)
			console.log(this.queryInfo.id)
			this.purchase_detaillist = res.purchase_details	//将staffs存入到stafflist中
			console.log(this.purchase_detaillist) 
		},

		async getUser(){ //点击按钮，获取某一采购明细的信息
			console.log(this.queryInfo.id)
			const {data:res} =await this.$http.post('ad_pd_manager_get',this.queryInfo) //向后端发送查询请求
			
			// if(res.code==="200"){
			// 	return this.$$message.error("查询成功")
			// }
			console.log(res)
			if (res.code == "200") {
				this.test_purchase_detaillist = res.purchase_details
				console.log(this.test_purchase_detaillist)
				this.$message.success("采购明细查询成功")
			}else{
				this.$message.error("采购明细查询失败")
			}
		},

		//监听添加采购明细对话框的关闭事件
		addDialogClosed(){
			this.$refs.addFormRef.resetFields()
		},

		//监听删除采购明细对话框的关闭事件
		deleteDialogClosed(){
			this.$refs.deleteFormRef.resetFields()
		},

		//监听修改采购明细对话框的关闭事件
		modifyDialogClosed(){
			this.$refs.modifyFormRef.resetFields()
		},

		//点击按钮，新增采购明细
		addPurchase_detail(){
			this.$refs.addFormRef.validate( async valid => {
				// console.log(valid)
				if (!valid) return
				//验证通过 可以添加
				const {data:res} = await this.$http.post("ad_pd_manager_add", this.addForm)
				console.log(res)

				//this.$http.error("添加采购明细失败")
				if(res.code == "200"){
					this.$message.success("添加采购明细成功！")
				}else{
					this.$message.error("添加采购明细失败！")
				}
				
				//隐藏添加的对话框
				this.addDialogVisiable = false
				//刷新列表，重新获得后端数据库中数据
				this.getUserList()
			})
		},

		//点击按钮，删除采购明细
		deletePurchase_detail(){
			this.$refs.deleteFormRef.validate( async valid => {
				// console.log(valid)
				if (!valid) return
				//验证通过 可以删除
				const {data:res} = await this.$http.post("ad_pd_manager_delete", this.deleteForm)
				console.log(res)

				//this.$http.error("添加采购明细失败")
				if(res.code == "200"){
					this.$message.success("删除采购明细成功！")
				}else{
					this.$message.error("删除采购明细失败！")
				}
				
				//隐藏删除的对话框
				this.deleteDialogVisiable = false
				//刷新列表，重新获得后端数据库中数据
				this.getUserList()
			})
		},

		//点击按钮，修改对应采购明细
		modifyPurchase_detail(){
			this.$refs.modifyFormRef.validate( async valid => {
				// console.log(valid)
				if (!valid) return
				//验证通过 可以修改
				const {data:res} = await this.$http.post("ad_pd_manager_modify", this.modifyForm)
				console.log(res)

				//this.$http.error("修改采购明细失败")
				if(res.code == "200"){
					this.$message.success("修改采购明细成功！")
				}else{
					this.$message.error("修改采购明细失败！")
				}
				
				//隐藏修改的对话框
				this.modifyDialogVisiable = false
				//刷新列表，重新获得后端数据库中数据
				this.getUserList()
			})
		}
	}
}
</script>
<style scoped>
</style>